<template>
  <div id="loadMore" @scroll="getScroll" @touchstart="touchStart" @touchmove="touchMove" @touchend="touchEnd">
    <slot></slot>
    <div  v-if="showMsg">
      	<div v-if="!loaded" class="loadmore">下拉查看更多~</div>
      	<div v-else class="loadover">我是有底线的~</div>
    </div>
  </div>
</template>

<script>
  /* eslint-disable */
  export default {
    name: 'loadmore',
    props: {
      getMore: {
        type: Function
      },
      allLoaded: {
        type: Boolean,
        default () {
          return false
        }
      },
      showMsg: {
      	type: Boolean,
        default () {
          return false
        }
      }
    },
     watch: {
	   	allLoaded(newValue,oldValue){
	    this.loaded = newValue
	   }
	  },
    data () {
      return {
        startY: 0,
        currentY: 0,
        touchBottom : false,
        loaded:false,
      }
    },
    methods: {//取可以滚动的元素
    	getScroll(event){
    		let that = this
    		let e = event || window.event
				let target = e.target || e.srcElement
    		console.log(e.target.scrollTop+'---scrollTop')
    		console.log(e.target.scrollHeight+'---scrollHeight')
    		console.log(e.target.offsetHeight+'---offsetHeight')
				if(e.target.scrollTop + e.target.offsetHeight + 1 >= e.target.scrollHeight){
					setTimeout(function(){
						that.touchBottom = true
					},1000)
				}else{
					this.touchBottom = false
				}
    		console.log(e.target.scrollTop + e.target.offsetHeight >= e.target.scrollHeight)
    	},
    	touchStart(event){
    		console.log("%c 触屏开始","color:green")
    		let e = event || window.event
				let target = e.target || e.srcElement
    		this.startY = e.touches[0].clientY
    	},
    	touchMove(event){
    		console.log("%c 滑动中","color:green")
    		let e = event || window.event
				let target = e.target || e.srcElement
    		this.currentY = e.touches[0].clientY;
    	},
    	touchEnd(){
    		console.log("%c 触屏结束","color:green")
    		console.log(this.currentY)
    		console.log(this.startY)
    		console.log(this.touchBottom)
    		if(this.startY - this.currentY > 10 && this.touchBottom){
    			this.getMore()
    		}
    	}
    }
  }
</script>

<style>
  #loadMore {
    min-height:100vh;
    height:200px;
    overflow:scroll;
  	width: 100%;
  }

  #loadMore .loadmore{
  	height:100%;
  	width: 100%;
  	height: 35px;
  	text-align: center;
  	line-height: 35px;
  	color: #bdbdbd;
  }
  #loadMore .loadover{
  	width: 100%;
  	height: 35px;
  	text-align: center;
  	line-height: 35px;
  	color: #bdbdbd;
  }
</style>
